<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>批量增加</title>
    <script type="text/javascript">
        function function1() {
            var df = document.createDocumentFragment(); // 创建文档碎片
            for (let i = 0; i < 5; i++) {
                var temp = document.createElement("div");
                temp.innerHTML = "div的文字";
                temp.setAttribute("style", "color:red;")

                df.appendChild(temp);
            }
            document.getElementById("con").appendChild(df);
        }

        function function2() {
            var df = document.createDocumentFragment();
            for (let i = 0; i < 5; i++) {
                var temp = document.createElement("img");
                temp.setAttribute("src", "./../asset/images/off.png")
                temp.setAttribute("width", "100px;")
                df.appendChild(temp);
            }

            document.getElementById("con").appendChild(df);
        }
    </script>
</head>
<body>
<button onclick="function1()">添加5个文本</button>
<button onclick="function2()">添加5个图形</button>
<div id="con"></div>
</body>
</html>